<template>
  <div class="category-list--container">
    <header>
      <div class="header-left--wrap">
        <label class="sub-block-title header-text">{{
          $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE')
        }}</label>
        <select
          :value="currentLocaleCode"
          class="row small-2 select-locale"
          @change="changeCurrentCategory"
        >
          <option
            v-for="allowedLocaleCode in allowedLocaleCodes"
            :key="allowedLocaleCode"
            :value="allowedLocaleCode"
          >
            {{ allowedLocaleCode }}
          </option>
        </select>
      </div>
      <div class="header-right--wrap">
        <woot-button
          size="small"
          variant="smooth"
          color-scheme="primary"
          icon="add"
          @click="openAddCategoryModal"
        >
          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.NEW_CATEGORY') }}
        </woot-button>
      </div>
    </header>
    <div class="category-list">
      <category-list-item
        :categories="categoriesByLocaleCode"
        @delete="deleteCategory"
        @edit="openEditCategoryModal"
      />
    </div>
    <edit-category
      v-if="showEditCategoryModal"
      :show.sync="showEditCategoryModal"
      :portal-name="currentPortalName"
      :locale="selectedCategory.locale"
      :category="selectedCategory"
      :selected-portal-slug="currentPortalSlug"
      @cancel="closeEditCategoryModal"
    />
    <add-category
      v-if="showAddCategoryModal"
      :show.sync="showAddCategoryModal"
      :portal-name="currentPortalName"
      :locale="currentLocaleCode"
      @cancel="closeAddCategoryModal"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import alertMixin from '@/yichat.web.share/mixins/alertMixin'
import portalMixin from '../../mixins/portalMixin'

import CategoryListItem from './CategoryListItem'
import AddCategory from './AddCategory'
import EditCategory from './EditCategory'
import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events'

export default {
  components: {
    CategoryListItem,
    AddCategory,
    EditCategory,
  },
  mixins: [alertMixin, portalMixin],
  data () {
    return {
      selectedCategory: {},
      selectedLocaleCode: '',
      currentLocaleCode: 'en',
      showEditCategoryModal: false,
      showAddCategoryModal: false,
      alertMessage: '',
    }
  },
  computed: {
    ...mapGetters({
      portals: 'portals/allPortals',
      meta: 'portals/getMeta',
      isFetching: 'portals/isFetchingPortals',
    }),
    currentPortalSlug () {
      return this.$route.params.portalSlug
    },
    categoriesByLocaleCode () {
      return this.$store.getters['categories/categoriesByLocaleCode'](
        this.currentLocaleCode
      )
    },
    currentPortal () {
      const slug = this.currentPortalSlug
      if (slug) return this.$store.getters['portals/portalBySlug'](slug)

      return this.$store.getters['portals/allPortals'][0]
    },
    currentPortalName () {
      return this.currentPortal ? this.currentPortal.name : ''
    },
    currentPortalLocale () {
      return this.currentPortal ? this.currentPortal?.meta?.default_locale : ''
    },
    allLocales () {
      return this.currentPortal
        ? this.currentPortal.config.allowed_locales
        : []
    },
    allowedLocaleCodes () {
      return this.allLocales.map(locale => locale.code)
    },
  },
  methods: {
    openAddCategoryModal () {
      this.showAddCategoryModal = true
    },
    openEditCategoryModal (category) {
      this.selectedCategory = category
      this.showEditCategoryModal = true
    },
    closeAddCategoryModal () {
      this.showAddCategoryModal = false
    },
    closeEditCategoryModal () {
      this.showEditCategoryModal = false
    },
    async fetchCategoriesByPortalSlugAndLocale (localeCode) {
      await this.$store.dispatch('categories/index', {
        portalSlug: this.currentPortalSlug,
        locale: localeCode,
      })
    },
    async deleteCategory (category) {
      try {
        await this.$store.dispatch('categories/delete', {
          portalSlug: this.currentPortalSlug,
          categoryId: category.id,
        })
        this.alertMessage = this.$t(
          'HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE'
        )
        this.$track(PORTALS_EVENTS.DELETE_CATEGORY, {
          hasArticles: category?.meta?.articles_count !== 0,
        })
      } catch (error) {
        const errorMessage = error?.message
        this.alertMessage =
          errorMessage ||
          this.$t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE')
      } finally {
        this.showAlert(this.alertMessage)
      }
    },
    changeCurrentCategory (event) {
      const localeCode = event.target.value
      this.currentLocaleCode = localeCode
      this.fetchCategoriesByPortalSlugAndLocale(localeCode)
    },
  },
}
</script>
<style lang="scss" scoped>
.category-list--container {
  width: 100%;
  padding-left: var(--space-normal);

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-normal);

    .header-left--wrap {
      display: flex;
      align-items: center;
      width: 100%;

      .header-text {
        font-weight: var(--font-weight-normal);
        margin-right: var(--space-slab);
        margin-bottom: 0;
      }
    }

    .header-right--wrap {
      flex: none;
      align-items: center;
    }
    .select-locale {
      height: var(--space-large);
      margin-bottom: 0;
      padding-top: var(--space-micro);
      padding-bottom: var(--space-micro);
    }
  }
}
</style>
